<script setup lang="ts">
import type { Reactive } from 'vue';

const pageTitleName = ref("")
const route = useRoute()
const router = useRouter()

interface userInter{
    id:string | string[],
    name: string,
    account: string,
    password: string,
}

interface userUpdateNameInter {
    id:string | string[],
    phone: string,
    new_name:string,
}

useHead({
    title:pageTitleName.value + '的设置'
})

watch(pageTitleName,(oldName,newName)=>{})

const userReactive:Reactive<userInter> = reactive({
    id: route.params.id,
    name: '' as '',
    account: '' as '',
    password: '' as ''

})
const newUserNameReactive:Reactive<userUpdateNameInter> = reactive({
    id: route.params.id,
    phone: '' as '',
    new_name: '' as ''
})
onMounted(async()=>{

    userReactive.id = await route.params.id
    fetch('/api/selectUserByID',{
        method:"POST",
        body:JSON.stringify(userReactive),
        headers:{
            'Content-Type':"application/json"
        }
    }).then(res=>{return res.json()}).then(async data=> {
        console.log(data)
        pageTitleName.value = await data.data.name
        userReactive.name = await data.data.name
        userReactive.account = await data.data.account
        userReactive.password = await data.data.password

        newUserNameReactive.phone = data.data.account
  })
})
function updateUserBtn(){
    fetch('/api/update/updateUserName',{
        method: "POST",
        body:JSON.stringify(newUserNameReactive),
        headers:{
            'Content-Type':"application/json"
        }
    }).then(res=>{return res.json()}).then(async data=>{
        console.log(data)
    })
}
</script>

<template>
    <div>你的昵称:{{ userReactive.name }}</div>
    <div>你的uid:{{ userReactive.id }}</div>
    <input type="text" placeholder="修改昵称" v-model="newUserNameReactive.new_name"/>
    <button @click="updateUserBtn">更改用户姓名</button>
</template>

<style scoped>

</style>